import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:ideology/shared/widgets/code_input/config/editor_config.dart';
import 'package:ideology/shared/widgets/code_input/highlight/highlight_theme.dart';
import 'package:ideology/shared/widgets/code_input/highlight/languages/dartish.dart';
import 'package:ideology/shared/widgets/code_input/highlight/syntax_highlighter.dart';
import 'package:ideology/shared/widgets/code_input/presentation/widgets/canvas_editor_state.dart';

/// **CanvasEditor**：一个可嵌入画布（Canvas）上的简易代码编辑器组件。
///
/// - 负责在 `State`（见 [CanvasEditorState]）中组合：
///   - 行号/滚动条绘制器（`LineNumberEditorPainter`）；
///   - 文本高亮绘制器（`EditorPainter`）；
///   - 文本缓冲、光标与选择逻辑（在 State 中维护）；
/// - 支持通过 [SyntaxHighlighter] + [HighlightTheme] 注入任意语言的高亮方案；
/// - 也提供了便捷工厂 [CanvasEditor.dartish]，用于快速创建 Dart-ish 高亮预设。
///
/// ### 关键属性
/// - [config]：编辑器样式与布局配置（行高、边距、字体等），默认 [EditorConfig]；
/// - [highlighter]：语法高亮器；
/// - [theme]：高亮主题；
/// - [externalText]：可选的外部文本监听器（只读绑定）。当其变化时，State 可选择同步到内部缓冲。
///
/// > 本组件仅定义了结构与依赖，核心行为在 [CanvasEditorState] 中实现。
class CanvasEditor extends StatefulWidget {
  /// 创建一个 Canvas 上的代码编辑器。
  ///
  /// - [config]：布局/样式配置，默认 `const EditorConfig()`；
  /// - [highlighter]：语法高亮器（必传）；
  /// - [theme]：高亮主题（必传）；
  /// - [externalText]：可选外部文本源（例如上层状态或表单控制的只读视图）。
  const CanvasEditor({
    super.key,
    this.config = const EditorConfig(),
    required this.highlighter,
    required this.theme,
    this.externalText,
  });

  /// 便捷构造：使用 Dart-ish 关键字集快速创建带高亮的编辑器。
  ///
  /// - 内部会基于 [config.metrics.textStyle] 作为基础文本样式，
  ///   调用 `makeDartishPreset(base)` 生成 `SyntaxHighlighter + HighlightTheme`；
  /// - 用法：
  /// ```dart
  /// final editor = CanvasEditor.dartish(
  ///   config: const EditorConfig(),
  /// );
  /// ```
  factory CanvasEditor.dartish({
    Key? key,
    EditorConfig config = const EditorConfig(),
  }) {
    // 注意：这里要先拿到 base TextStyle；因为 config 是 const，
    // 实际 base 使用时可在 State 里用 metrics 读取；为了简化，
    // 我们这里直接按 config.metrics.textStyle 生成。
    final base = config.metrics.textStyle;
    final preset = makeDartishPreset(base);
    return CanvasEditor(
      key: key,
      config: config,
      highlighter: preset.highlighter,
      theme: preset.theme,
    );
  }

  /// 编辑器的布局与交互配置（行高/边距/字体/光标闪烁等参数）。
  final EditorConfig config;

  /// 语法高亮器：将每一行文本切分为 token，并选择对应样式。
  final SyntaxHighlighter highlighter;

  /// 高亮主题：定义不同 token 类型（关键字/字符串/注释…）的 [TextStyle]。
  final HighlightTheme theme;

  /// 外部文本的可选只读监听器。
  ///
  /// - 若提供，State 层可在其变更时同步内部文本（具体策略由 [CanvasEditorState] 实现）；
  /// - 常见于配合表单/全局状态/回放系统的只读渲染场景。
  final ValueListenable<String?>? externalText;

  @override
  CanvasEditorState createState() => CanvasEditorState();
}
